<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 1. 避免数据共享问题（核心原因）
    //     如果 data 是一个普通对象，当组件被复用时（例如在同一个页面上多次使用同一个组件），所有实例将共享同一个数据对象！

    //     这会导致一个组件修改数据时，其他所有实例的数据也会被意外修改（数据污染）。

    //     示例（错误写法会导致数据共享）：
        // ❌ 错误写法（data 是对象）
        // data: {
        //     count: 0
        // }

    // 2. 函数返回独立对象（正确做法）
    //     通过将 data 声明为函数，每次组件实例化时，Vue 会调用该函数，返回一个全新的数据对象副本。

    //     这样每个组件实例都能维护自己独立的数据状态，互不干扰。

    //     示例（正确写法）：
        // ✅ 正确写法（data 是函数）
        // data() {
        //     return {
        //         count: 0
        //     }
        // }

    // 3. 根实例的特殊情况
    //     仅在 Vue 根实例（new Vue()） 中，data 可以直接是一个对象（因为根实例不会复用，无需隔离数据）。

    //     但在组件中，必须用函数形式。

    //     new Vue({
    //         el: '#app',
    //         data: {  // ✅ 根实例可以用对象
    //             message: 'Hello'
    //         }
    //     });
</script>
</html>